<template>
    <div class='fxn-body'>
        <div class="fxn-index">
            <div class="fxn-index-left">
                <div class="data">
                    <div class="title">本月核心数据</div>
                    <div class="wrap">
                        <div class="item">
                            <div class="sub">本月新增客户</div>
                            <div class="number">{{topData.addnum}}</div>
                            <div class="month">同比上月 <span class="fxn-text-red">11.2% <el-icon><CaretTop /></el-icon></span></div>
                        </div>
                        <div class="item">
                            <div class="sub">本月收费金额</div>
                            <div class="number">{{topData.sharenum}}</div>
                            <div class="month">同比上月 <span class="fxn-text-red">4.2% <el-icon><CaretTop /></el-icon></span></div>
                        </div>
                        <div class="item">
                            <div class="sub">本月新增案件</div>
                            <div class="number">{{topData.casenum}}</div>
                            <div class="month">同比上月 <span class="fxn-text-green">7.2% <el-icon><CaretBottom /></el-icon></span></div>
                        </div>
                        <div class="item">
                            <div class="sub">本月新增顾问</div>
                            <div class="number">{{topData.courtnum}}</div>
                            <div class="month">同比上月 <span class="fxn-text-green">1.2% <el-icon><CaretBottom /></el-icon></span></div>
                        </div>
                    </div>
                </div>
                <!-- Data End -->
                <!-- <div class="echart">

                </div> -->
                <!-- Echart End -->
            </div>
            <!-- Left End -->
            <div class="fxn-index-right">
                <div class="user">
                    <div class="left">
                        <div class="sub">{{userInfo.username}} <span class="fxn-ft-12">[{{$filter.groupRole(userInfo.group_id[0],groupData)}}]</span></div>
                        <div class="fxn-text-gray fxn-ft-12">上次登录时间: {{$filter.dateTime(userInfo.login_time,1)}}</div>
                        <div class="fxn-text-gray fxn-ft-12">登录IP: {{userInfo.login_ip}}</div>
                    </div>
                </div>

                <div class="shortcut">
                    <div class="title"><i class="iconfont icon-modular"></i> 快捷操作</div>
                    <div class="item fxn-margin-b-12" v-for="(item,index) in menuData" :key="index" @click="handleMenu(item.path)">
                        <div class="cell " :class="item.color">
                            <i class="iconfont " :class="item.icon"></i>
                        </div>
                        <div>{{item.title}}</div>
                    </div>
                </div>

                <div class="message">
                    <div class="title">
                        <i class="iconfont icon-message"></i>消息中心
                        <div class="fxn-pull-right fxn-cursor" @click="handlePath">
                            <el-icon><MoreFilled /></el-icon>
                        </div>
                    </div>
                    <div class="wrap" style="display: none">
                        <div class="item">
                            <div class="sub"><span class="fxn-text-blue">[财务]</span> 消息AAAAA</div>
                            <div class="info">您有一条费用申请已完成审核《孙某爱经济纠纷》，请知悉！</div>
                        </div>
                        <div class="item">
                            <div class="sub"><span class="fxn-text-org">[客户]</span> 消息BBBB</div>
                            <div class="info">Hi Fxndesign! How are You?</div>
                        </div>
                        <div class="item">
                            <div class="sub"><span class="fxn-text-red">[案件]</span> 消息C</div>
                            <div class="info">Hi Fxndesign! How are You?</div>
                        </div>
                        <div class="item">
                            <div class="sub"><span class="fxn-text-green">[顾问]</span> 消息C</div>
                            <div class="info">Hi Fxndesign! How are You?</div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Right End -->
        </div>
        <!-- Index End -->
    </div>
</template>

<script>
    import { defineComponent, reactive, getCurrentInstance, onMounted, toRefs, computed } from 'vue'
    import { useRouter } from 'vue-router'
    import { useStore } from 'vuex'
    export default defineComponent({
        name: '',
        setup() {
            const { proxy } = getCurrentInstance();
            const router = useRouter();
            const store = useStore();

            //初始化数据
            const state = reactive({
                topData: {},
                menuData: [
                    {title: '我的客户', icon: 'icon-emoji', color: 'fxn-bg-blue', path: '/CustomManage'},
                    {title: '我的案件', icon: 'icon-createtask', color: 'fxn-bg-org', path: '/CaseManage'},
                    {title: '我的顾问', icon: 'icon-customerservice', color: 'fxn-bg-red', path: '/AdviserManage'},
                    {title: '员工管理', icon: 'icon-addressbook', color: 'fxn-bg-green', path: '/UserManage'},
                ],
                //角色
                groupData: computed(() => store.state.groupData),
                //用户
                userInfo: JSON.parse(localStorage.getItem('userInfo')),
            })

            //获取本月数据
            const getTopData = () => {
                proxy.$http.post('/api/index/gettopdata')
                .then(res=>{
                    state.btnLoading = false;
                    const { code, msg ,data } = res;
                    if(code != 200){
                        proxy.$message.error(msg);
                    }else{
                        state.topData = data;
                    }
                })
            }

            //快捷操作
            const handleMenu = (path) => {
                router.push(path);
            }

            //跳转链接
            const handlePath = () => {
                router.push('/MessageManage')
            }
            
            //Dom加载
            onMounted(()=>{
                getTopData();
            })
            
            return {
                ...toRefs(state),
                
                //请求方法
                getTopData,
                handleMenu,
                handlePath,
                
                //组件方法
            }

        },
    })
</script>

<style scoped>
    .fxn-index{
        position: relative;
	    overflow: hidden;
    }

    .fxn-index-left{
        margin-right: 16rem;
    }

    .fxn-index-left .data{
        padding: 1rem;
        border-radius: .4rem;
        background: #FFFFFF;
        overflow: hidden;
    }

    .fxn-index-left .data .title{
        margin-bottom: .5rem;
        color: #232360;
        font-size: .9rem;
        overflow: hidden;
    }

    .fxn-index-left .data .wrap{
        display: flex;
        line-height: 1.2rem;
        overflow: hidden;
    }

    .fxn-index-left .data .wrap .item{
        flex: 1;
    }

    .fxn-index-left .data .wrap .item .sub{
        color: #768396;
    }

    .fxn-index-left .data .wrap .item .number{
        padding: .25rem 0;
        color: #232360;
        font-size: 1.2rem;
    }

    .fxn-index-left .data .wrap .item .month{
        color: #768396;
        font-size: .6rem;
    }

    .fxn-index-left .echart{
        margin-top: 1rem;
        padding: 1rem;
        border-radius: .4rem;
        background: #FFFFFF;
        overflow: hidden;
    }

    .fxn-index-right{
        position: fixed;
        right: 0;
        top: 69px;
        bottom: 0;
        width: 15rem;
        padding: 20px 0;
        overflow: auto;
        background: #FFFFFF;
    }

    .fxn-index-right .shortcut{
        padding: 1rem;
        border-bottom: 1px solid #F3F7FD;
        overflow: hidden;
    }

    .fxn-index-right .shortcut .title{
        margin-bottom: 1rem;
        color: #232360;
        font-size: .8rem;
        overflow: hidden;
    }

    .fxn-index-right .shortcut .title i{
        margin-right: .25rem;
        font-size: .7rem;
    }

    .fxn-index-right .shortcut .item{
        width: 50%;
        text-align: center;
        display: inline-block;
    }

    .fxn-index-right .shortcut .item .cell{
        margin: 0 auto;
        width: 2.5rem;
        min-height: 2.5rem;
        color: #FFFFFF;
        font-size: 1.2rem;
        text-align: center;
        line-height: 2.5rem;
        border-radius: .4rem;
        cursor: pointer;
    }

    .fxn-index-right .shortcut .item .cell:hover{
        opacity: .9;
    }

    .fxn-index-right .user{
        padding: 1rem;
        text-align: center;
        line-height: 1.2rem;
        border-bottom: 1px solid #F3F7FD;
        overflow: hidden;
    }

    .fxn-index-right .user .sub{
        color: #5051F9;
        font-size: .9rem;
        font-weight: bold;
    }

    .fxn-index-right .message{
        padding: 1rem;
        overflow: hidden;
    }

    .fxn-index-right .message .title{
        margin-bottom: .5rem;
        color: #232360;
        font-size: .8rem;
        overflow: hidden;
    }

    .fxn-index-right .message .title i{
        margin-right: .25rem;
    }

    .fxn-index-right .message .wrap{
        overflow: hidden;
    }

    .fxn-index-right .message .wrap .item{
        margin-bottom: .5rem;
        padding: .5rem;
        line-height: 1.2rem;
        border-radius: .2rem;
        background: #F3F7FD;
        overflow: hidden;
    }

    .fxn-index-right .message .wrap .item:hover{
        cursor: pointer;
        background: #F5F5FA;
    }

    .fxn-index-right .message .wrap .item .sub{
        color: #232360;
    }

    .fxn-index-right .message .wrap .item .info{
        color: #768396;
    }
</style>